{% extends "hs-base.html" %}
{% block div %}
    <div class="content">
                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="card-box">
                                    <h4 class="header-title m-t-0 m-b-30"> 针对工作流场景的用例设计 </h4>

                                    <ul class="nav nav-tabs">
                                        <li class="nav-item">
                                            <a href="#sgdr" data-toggle="tab" aria-expanded="true" class="nav-link active">
                                               <i class="fi-head mr-2"></i> 手工输入
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="#wjdr" data-toggle="tab" aria-expanded="false" class="nav-link">
                                                <i class="fi-monitor mr-2"></i> 文件导入
                                            </a>
                                        </li>
                                    </ul>

                                    <div class="tab-content">
                                        <div class="tab-pane show active" id="sgdr">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="card-box table-responsive">
                                                            <div class="form-group">
                                                                <button onclick="add()" class="btn btn-danger waves-light waves-effect">
                                                                <i class="icon-plus"></i>
                                                            </button>
                                                             <button id="dell" value= 0 onclick="del()" class="btn btn-danger waves-light waves-effect" >
                                                                <i class="icon-close"></i>
                                                            </button>

                                                            </div>
                                                            <form  action="#" class="sheet-form-1" method="post">

                                                                <div class="form-row">
                                                                    <div class="form-group col-md-6" id="qd" >
                                                        <label> 起点 </label><br>
                                                        <div>
                                                            <input type="text" id="start" name="start" class="form-control" required
                                                                   data-parsley-minlength="2">
                                                        </div>
                                                    </div>
                                                                    <div class="form-group col-md-6" id="zd" >
                                                        <label> 终点 </label><br>
                                                        <div>
                                                            <input type="text" id="end" name="end" class="form-control" required
                                                                   data-parsley-minlength="2">
                                                        </div>
                                                    </div>
                                                                                                                                    <div class="form-group col-md-6" id="father" >
                                                        <label> 父节点 </label><br>
                                                        <div>
                                                            <input type="text" id="f0" name="f0" class="form-control" required
                                                                   data-parsley-minlength="2">
                                                        </div>
                                                    </div>
                                                                <div class="form-group col-md-6" id="son">
                                                        <label> 子节点 </label><br>
                                                        <div>
                                                            <input type="text" id="s0" name="s0" class="form-control" required
                                                                   data-parsley-minlength="2">
                                                        </div>
                                                    </div>
                                                                </div>


                                                                <div align="right">
                                                            <button type="submit" class="btn right btn-custom waves-effect waves-light" name="fun" value="show1">
                                                                生成
                                                            </button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div> <!-- end row -->
                                        </div>
                                        <div class="tab-pane" id="wjdr">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="card-box table-responsive">

                                                            <form action="#" method="post" class="dropzone sheet-form-2" enctype="multipart/form-data">
                                                                <div class="fallback form-group">
                                                                    <input name="file" type="file" multiple>
                                                                </div>
                                                            </form>
                                                            <form action="#" method="post" class="sheet-form-2">
                                                                <div align="right">
                                                            <button type="submit" class="btn right btn-custom waves-effect waves-light" name="fun" value="show2">
                                                                生成
                                                            </button>
                                                                </div>
                                                            </form>
                                                        </div>

                                                    </div>
                                                </div> <!-- end row -->
                                        </div>
                                    </div>
                                    <table id="datatable-buttons" class="table table-striped table-bordered" cellspacing="0" width="100%">
                                        <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>路径信息</th>
                                            <th>涉及节点数量</th>
                                        </tr>
                                        </thead>

                                        <tbody>
                                        {% for pathlist in pathlists %}
                                            <tr>
                                                <td>{{ loop.index }}</td>
                                                <td>
                                                    {% for x in pathlist %}
                                                        {% if loop.index == loop.length %}
                                                            {{ x }}
                                                        {% else %}
                                                            {{ x }}->
                                                        {% endif %}
                                                    {% endfor %}
                                                </td>
                                                <td>{{ pathlist|length }}</td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div><!-- end col -->
                        </div>
                        <!-- end row -->

                    </div> <!-- container -->

                </div>


{% endblock %}

{% block script %}
    <script type="text/javascript">
        var num = 0;

        function add(){
            num++;
            var fa = '<div id="father'+num+'"><br><input type="text" id="'+num+'" name="f'+num+'" class="form-control" required data-parsley-minlength="2"></div>';
            var so = '<div id="son'+num+'"><br><input type="text" id="'+num+'" name="s'+num+'" class="form-control" required data-parsley-minlength="2"></div>';
            $("#father").append(fa);
            $("#son").append(so);
        }

        function del(){

            var id = num;
            var e = document.getElementById("father"+num);
            var f = document.getElementById("son"+num);
            document.getElementById("father").removeChild(e);
            document.getElementById("son").removeChild(f);


            num--;

        }

    </script>

{% endblock %}